<template>
	<el-form ref="genInfoForm" :model="info" :rules="rules" label-width="150px">
		<el-row>
			<el-col :span="12">
				<el-form-item prop="tplCategory">
					<template #label>生成模板</template>
					<el-select v-model="info.tplCategory" @change="tplSelectChange">
						<el-option label="单表（增删改查）" value="crud"/>
						<el-option label="树表（增删改查）" value="tree"/>
						<el-option label="主子表（增删改查）" value="sub"/>
					</el-select>
				</el-form-item>
			</el-col>

			<el-col :span="12">
				<el-form-item prop="tplWebType">
					<template #label>前端类型</template>
					<el-select v-model="info.tplWebType">
						<el-option label="Vue2 Element UI 模版" value="element-ui"/>
						<el-option label="Vue3 Element Plus 模版" value="element-plus"/>
					</el-select>
				</el-form-item>
			</el-col>

			<el-col :span="12">
				<el-form-item prop="packageName">
					<template #label>
						生成包路径
						<el-tooltip content="生成在哪个java包下，例如 com.ruoyi.system" placement="top">
							<el-icon>
								<question-filled/>
							</el-icon>
						</el-tooltip>
					</template>
					<el-input v-model="info.packageName"/>
				</el-form-item>
			</el-col>

			<el-col :span="12">
				<el-form-item prop="moduleName">
					<template #label>
						生成模块名
						<el-tooltip content="可理解为子系统名，例如 system" placement="top">
							<el-icon>
								<question-filled/>
							</el-icon>
						</el-tooltip>
					</template>
					<el-input v-model="info.moduleName"/>
				</el-form-item>
			</el-col>

			<el-col :span="12">
				<el-form-item prop="businessName">
					<template #label>
						生成业务名
						<el-tooltip content="可理解为功能英文名，例如 user" placement="top">
							<el-icon>
								<question-filled/>
							</el-icon>
						</el-tooltip>
					</template>
					<el-input v-model="info.businessName"/>
				</el-form-item>
			</el-col>

			<el-col :span="12">
				<el-form-item prop="functionName">
					<template #label>
						生成功能名
						<el-tooltip content="用作类描述，例如 用户" placement="top">
							<el-icon>
								<question-filled/>
							</el-icon>
						</el-tooltip>
					</template>
					<el-input v-model="info.functionName"/>
				</el-form-item>
			</el-col>

			<el-col :span="12">
				<el-form-item prop="genType">
					<template #label>
						生成代码方式
						<el-tooltip content="默认为zip压缩包下载，也可以自定义生成路径" placement="top">
							<el-icon>
								<question-filled/>
							</el-icon>
						</el-tooltip>
					</template>
					<el-radio v-model="info.genType" value="0">zip压缩包</el-radio>
					<el-radio v-model="info.genType" value="1">自定义路径</el-radio>
				</el-form-item>
			</el-col>

			<el-col :span="12">
				<el-form-item>
					<template #label>
						上级菜单
						<el-tooltip content="分配到指定菜单下，例如 系统管理" placement="top">
							<el-icon>
								<question-filled/>
							</el-icon>
						</el-tooltip>
					</template>
					<el-tree-select
							v-model="info.parentMenuId"
							:data="menuOptions"
							:props="{ value: 'menuId', label: 'menuName', children: 'children' }"
							check-strictly
							placeholder="请选择系统菜单"
							value-key="menuId"
					/>
				</el-form-item>
			</el-col>

			<el-col v-if="info.genType == '1'" :span="24">
				<el-form-item prop="genPath">
					<template #label>
						自定义路径
						<el-tooltip content="填写磁盘绝对路径，若不填写，则生成到当前Web项目下" placement="top">
							<el-icon>
								<question-filled/>
							</el-icon>
						</el-tooltip>
					</template>
					<el-input v-model="info.genPath">
						<template #append>
							<el-dropdown>
								<el-button type="primary">
									最近路径快速选择
									<i class="el-icon-arrow-down el-icon--right"></i>
								</el-button>
								<template #dropdown>
									<el-dropdown-menu>
										<el-dropdown-item @click="info.genPath = '/'">恢复默认的生成基础路径</el-dropdown-item>
									</el-dropdown-menu>
								</template>
							</el-dropdown>
						</template>
					</el-input>
				</el-form-item>
			</el-col>
		</el-row>

		<template v-if="info.tplCategory == 'tree'">
			<h4 class="form-header">其他信息</h4>
			<el-row v-show="info.tplCategory == 'tree'">
				<el-col :span="12">
					<el-form-item>
						<template #label>
							树编码字段
							<el-tooltip content="树显示的编码字段名， 如：dept_id" placement="top">
								<el-icon>
									<question-filled/>
								</el-icon>
							</el-tooltip>
						</template>
						<el-select v-model="info.treeCode" placeholder="请选择">
							<el-option
									v-for="(column, index) in info.columns"
									:key="index"
									:label="column.columnName + '：' + column.columnComment"
									:value="column.columnName"
							></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item>
						<template #label>
							树父编码字段
							<el-tooltip content="树显示的父编码字段名， 如：parent_Id" placement="top">
								<el-icon>
									<question-filled/>
								</el-icon>
							</el-tooltip>
						</template>
						<el-select v-model="info.treeParentCode" placeholder="请选择">
							<el-option
									v-for="(column, index) in info.columns"
									:key="index"
									:label="column.columnName + '：' + column.columnComment"
									:value="column.columnName"
							></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item>
						<template #label>
							树名称字段
							<el-tooltip content="树节点的显示名称字段名， 如：dept_name" placement="top">
								<el-icon>
									<question-filled/>
								</el-icon>
							</el-tooltip>
						</template>
						<el-select v-model="info.treeName" placeholder="请选择">
							<el-option
									v-for="(column, index) in info.columns"
									:key="index"
									:label="column.columnName + '：' + column.columnComment"
									:value="column.columnName"
							></el-option>
						</el-select>
					</el-form-item>
				</el-col>
			</el-row>
		</template>

		<template v-if="info.tplCategory == 'sub'">
			<h4 class="form-header">关联信息</h4>
			<el-row>
				<el-col :span="12">
					<el-form-item>
						<template #label>
							关联子表的表名
							<el-tooltip content="关联子表的表名， 如：sys_user" placement="top">
								<el-icon>
									<question-filled/>
								</el-icon>
							</el-tooltip>
						</template>
						<el-select v-model="info.subTableName" placeholder="请选择" @change="subSelectChange">
							<el-option
									v-for="(table, index) in tables"
									:key="index"
									:label="table.tableName + '：' + table.tableComment"
									:value="table.tableName"
							></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item>
						<template #label>
							子表关联的外键名
							<el-tooltip content="子表关联的外键名， 如：user_id" placement="top">
								<el-icon>
									<question-filled/>
								</el-icon>
							</el-tooltip>
						</template>
						<el-select v-model="info.subTableFkName" placeholder="请选择">
							<el-option
									v-for="(column, index) in subColumns"
									:key="index"
									:label="column.columnName + '：' + column.columnComment"
									:value="column.columnName"
							></el-option>
						</el-select>
					</el-form-item>
				</el-col>
			</el-row>
		</template>

	</el-form>
</template>

<script setup>
import {listMenu} from '@/api/system/menu'

const subColumns = ref([])
const menuOptions = ref([])
const {proxy} = getCurrentInstance()

const props = defineProps({
	info: {
		type: Object,
		default: null
	},
	tables: {
		type: Array,
		default: null
	}
})

// 表单校验
const rules = ref({
	tplCategory: [{required: true, message: '请选择生成模板', trigger: 'blur'}],
	packageName: [{required: true, message: '请输入生成包路径', trigger: 'blur'}],
	moduleName: [{required: true, message: '请输入生成模块名', trigger: 'blur'}],
	businessName: [{required: true, message: '请输入生成业务名', trigger: 'blur'}],
	functionName: [{required: true, message: '请输入生成功能名', trigger: 'blur'}]
})

function subSelectChange(value) {
	props.info.subTableFkName = ''
}

function tplSelectChange(value) {
	if (value !== 'sub') {
		props.info.subTableName = ''
		props.info.subTableFkName = ''
	}
}

function setSubTableColumns(value) {
	for (var item in props.tables) {
		const name = props.tables[item].tableName
		if (value === name) {
			subColumns.value = props.tables[item].columns
			break
		}
	}
}

/** 查询菜单下拉树结构 */
function getMenuTreeselect() {
	listMenu().then(response => {
		menuOptions.value = proxy.handleTree(response.data, 'menuId')
	})
}

onMounted(() => {
	getMenuTreeselect()
})

watch(() => props.info.subTableName, val => {
	setSubTableColumns(val)
})

watch(() => props.info.tplWebType, val => {
	if (val === '') {
		props.info.tplWebType = 'element-plus'
	}
})

</script>
